<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="请输入任务名称"
        autofocus
        v-model="value"
        @keyup.enter="addList"
      />
    </header>
    <!-- 主体部分 -->
    <BodyPage
      :list="list"
      @delList="delList"
      @alterStatues="alterStatues"
      @allChecked="allChecked"
    ></BodyPage>
    <!-- 底部部分 -->
    <FooterPage
      @changeStatues="changeStatues"
      v-if="list.length"
      @delAllComplete="delAllComplete"
      :copmuteNum="copmuteNum"
    ></FooterPage>
  </section>
</template>

<script>
import BodyPage from '@/components/BodyPage.vue'
import FooterPage from '@/components/FooterPage.vue'
export default {
  components: {
    BodyPage,
    FooterPage
  },
  data () {
    return {
      list: [
        { id: 1, name: '读万卷书', statues: false },
        { id: 2, name: '行万里路', statues: true }
      ],
      value: '',
      flag: false
    }
  },
  methods: {
    //添加功能
    addList () {
      if (!this.value.trim().length) return
      const obj = { id: +new Date(), name: this.value, statues: false }
      this.list.push(obj)
      this.value = ''
    },
    //删除功能
    delList (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    //挑选状态功能
    changeStatues (statues) {
      switch (statues) {
        case 'all':
          return this.list
        case 'active':
          this.list = this.list.filter(item => item.statues === false)
          return
        case 'completed':
          this.list = this.list.filter(item => item.statues === true)
          return
        default:
          return this.list
      }
    },
    alterStatues (id, index) {
      const newobj = this.list.find(item => (item.id = id))
      newobj.statues = this.flag
      this.list.splice(index, 1, newobj)
      this.flag = !this.flag
    },
    delAllComplete () {
      this.list = this.list.filter(item => item.statues !== true)
    },
    allChecked () {
      this.list.forEach(item => item.statues === this.flag)
    }
  },
  computed: {
    //计算出任务已完成的数量
    copmuteNum () {
      return this.list.filter(item => item.statues === false).length
    }
  }
}
</script>

<style></style>
